<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: black;
        }
        div{
            width: 105px;
            height: 150px;
            margin: 100px auto;
            /*定义perspective：让元素的子元素具有透视的效果*/
            perspective: 1200px;
            -webkit-perspective: 1200px;
        }
        ul{
            width: 100%;
            height: 100%;
            /*transform-style：让元素的子元素具有3d效果*/
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            /*因为做一个圆柱，圆柱整体本身有一个倾斜的角度，所有定义旋转的效果*/
            transform: rotateX(-16deg) rotateY(0deg) rotateZ(0deg);
        }
        ul li{
            width: 100%;
            height: 100%;
            /*把每个li的位置做一个固定定位，让他们的中心点不变*/
            position: absolute;
            /*background-size定义背景的大小，只有两个的大小都定义成100%，这样才能保证背景显示的大小是完全的比例*/
            background-size: 100% 100%;
        }
        ul li:first-child{
            background-image: url(img/01.jpg);
            transform: translateZ(200px);
            /*为了看出来3d效果，让第一张图片向外突出，看起来更靠向用户*/
            -webkit-transform:translateZ(200px);
        }
        ul li:nth-child(2){
             background-image: url(img/02.jpg);
            /*因为圆柱是垂直的旋转的，所以定义rotateY*/
             transform:rotateY(30deg) translateZ(200px);
         }
        ul li:nth-child(3){
            background-image: url(img/03.jpg);
            transform:rotateY(60deg) translateZ(200px);
        }
        ul li:nth-child(4){
            background-image: url(img/04.jpg);
            transform:rotateY(90deg) translateZ(200px);
        }
        ul li:nth-child(5){
            background-image: url(img/05.jpg);
            transform:rotateY(120deg) translateZ(200px);
        }
        ul li:nth-child(6){
            background-image: url(img/06.jpg);
            transform:rotateY(150deg) translateZ(200px);
        }
        ul li:nth-child(7){
            background-image: url(img/07.jpg);
            transform:rotateY(180deg) translateZ(200px);
        }
        ul li:nth-child(8){
                background-image: url(img/08.jpg);
                transform:rotateY(210deg) translateZ(200px);
            }
        ul li:nth-child(9){
            background-image: url(img/09.jpg);
            transform:rotateY(240deg) translateZ(200px);
        }
        ul li:nth-child(10){
            background-image: url(img/10.jpg);
            transform:rotateY(270deg) translateZ(200px);
        }
        ul li:nth-child(11){
            background-image: url(img/11.jpg);
            transform:rotateY(300deg) translateZ(200px);
        }
        ul li:last-child{
            background-image: url(img/12.jpg);
            transform:rotateY(330deg) translateZ(200px);
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>